<template>
  <div id="cesium_container"></div>
</template>

<script setup lang="ts">
import { Ion, Terrain, Viewer } from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
import { onMounted } from "vue";

Ion.defaultAccessToken =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYmM0YTc3Zi1hMWNkLTQ2ZWQtOGRjMy1kZWQyNTAwOTYzNGUiLCJpZCI6Mjc5MjI5LCJpYXQiOjE3NDA1NTMzMTh9.ry66GUC1ujqbpWMjKwYrq4WwptoUQ6y03riFDir2MAw";

/**
 * cesium挂载需要一个容器，直接定义id=cesiumContainer
 * 注意：在onMounted生命周期中操作dom元素
 */
onMounted(async () => {
  //将__viewer视角挂载到window全局，方便其他页面使用并调试；
  window.__viewer = new Viewer("cesium_container", {
    // 地形影像
    terrain: Terrain.fromWorldTerrain()
    // baseLayerPicker: false,
    // // 自定义加载影像图层
    // baseLayer: new ImageryLayer(
    //     new OpenStreetMapImageryProvider({
    //         url: "https://tile.openstreetmap.org/",
    //     })
    // ),
  });
  // const { __viewer } = window;
  // console.log("--viewers--", __viewer);
  // // 显示帧率
  // __viewer.scene.debugShowFramesPerSecond = true;
  // // 监听点击事件，拾取坐标
  // const handler = new ScreenSpaceEventHandler(__viewer.scene.canvas);
  // handler.setInputAction((e) => {
  //   const clickPosition = __viewer.scene.camera.pickEllipsoid(e.position);
  //   console.log("Cartesian世界坐标", clickPosition);
  //   const randiansPos = Cartographic.fromCartesian(clickPosition);
  //   console.log("经度：" + Math.toDegrees(randiansPos.longitude) + ", 纬度：" + Math.toDegrees(randiansPos.latitude));

  //   鼠标拾取
  //   const feature = __viewer.scene.pick(e.position);
  //   console.log("feature", feature);
  //   if (defined(feature) && feature.id) {
  //       console.log("当前元素类型--", feature.id);
  //   }
  // }, ScreenSpaceEventType.LEFT_CLICK);
});
</script>

<style scoped>
#cesium_container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>
